<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>ngImgCrop Test Page</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script type="text/javascript" src="ng-img-crop.js"></script>
  <link rel="stylesheet" href="ng-img-crop.css"/>
  <style>
    .cropArea {
      background: #E4E4E4;
      overflow: hidden;
	  float:left;
    }
    .cropArea.big {
      width:800px;
      height:600px;
    }
  </style>
</head>
<body ng-controller="Ctrl">
  <form ng-show="enableCrop">
    <label for="fileInput">Select Image:</label>
    <input type="file" id="fileInput" />
    <button type="reset">Clear</button>
    <button ng-click="imageDataURI='test.jpg'">Set Test Image</button>
  </form>
  <div>
    <button ng-click="imageDataURI=''">Reset Image</button>
  </div>

  <div ng-if="enableCrop" class="cropArea big">
    <img-crop image="imageDataURI"
              result-image="$parent.resImageDataURI"
              area-type="{{type}}"
              area-min-size="selMinSize"
              result-image-format="{{resImgFormat}}"
              result-image-quality="resImgQuality"
              result-image-size="resImgSize"
    ></img-crop>
              <!--aspect-ratio="aspectRatio"-->
  </div>

  <div style="float:right;margin-right:100">
    <h3>Result</h3>
    <div>
      <img ng-src="{{resImageDataURI}}" />
    </div>
  </div>

  <script type="text/javascript">
    angular.module('app', ['ngImgCrop'])
      .controller('Ctrl', function($scope) {
        $scope.size='big';
        $scope.type='circle';
        $scope.imageDataURI='test.jpg';
        $scope.resImageDataURI='';
        $scope.resImgFormat='image/png';
        $scope.resImgQuality=1;
        $scope.selMinSize=100;
        $scope.resImgSize=200;
		$scope.enableCrop=true;
        //$scope.aspectRatio=1.2;
        var handleFileSelect=function(evt) {
          var file=evt.currentTarget.files[0];
          var reader = new FileReader();
          reader.onload = function (evt) {
            $scope.$apply(function($scope){
              $scope.imageDataURI=evt.target.result;
            });
          };
		           reader.readAsDataURL(file);
        };
        angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
        //$scope.$watch('resImageDataURI',function(){
        //  console.log('Res image', $scope.resImageDataURI);
        //});
      });
  </script>
</body>
</html>